<template>
  <a-drawer
    title="工作表触发"
    :visible="dialog"
    :maskStyle="{background: 'transparent'}"
    :maskClosable="false"
    width="500"
    @close="cancel"
  >
  <div class="worksheet_trigger_body">
      <div class="worksheet_trigger_form">
        <a-form-model layout="vertical" :model="form">
            <a-form-model-item v-for="item in schemaInputs" :key="item.id" :label="item.title">
                <a-select v-if="item.customType === 'worksheet'" v-model="form.worksheetId" optionFilterProp='children' show-search>
                    <a-select-option v-for="item in worksheetList" :key="item.id" :value="item.id">
                      {{item.name}}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="选择触发方式">
                <a-radio-group v-model="form.trigger" style="display: flex;flex-direction: column">
                    <a-radio v-for="item in trigger" :key="item.name" style="padding: 10px" :value="item.name">
                        {{item.name}}
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="触发条件">
              <a-button type="primary" @click="handleButtonAddFilter" v-show="filters.length === 0">添加条件</a-button>
              <div v-for="(item, index) in filters" :key="item.uuid">
                <workflow-filter-list
                  :filter='item'
                  :index="index"
                  :output="output"
                  :showOr="index === filters.length - 1"
                  @addFilter="handleAddFilter"
                  @addChildFilter="handleAddChildFilter"
                  @deleteChildFilter="handleDeleteChildFilter"
                />
              </div>
            </a-form-model-item>
            <!-- <a-form-model-item label="选择更新字段" v-show="form.trigger === '1'">
                <a-select v-model="form.updateFields" mode="multiple">
                    <a-select-option value="shanghai">
                        Zone one
                    </a-select-option>
                    <a-select-option value="beijing">
                        Zone two
                    </a-select-option>
                </a-select>
                <span>未指定则表示任何字段更新时都会触发</span>
            </a-form-model-item> -->
        </a-form-model>
      </div>
      <div class="worksheet_trigger_foot">
        <a-button type="primary" @click="save(false)">
          保存
        </a-button>
        <a-button @click="cancel">
          取消
        </a-button>
      </div>
  </div>
  </a-drawer>
</template>
<script>
import {getAllWorksheet} from "@/api/app"
import {getNodeOutput} from "@/api/appWorkflow"
import {uuid} from "@/utils/utils"
import WorkflowFilterList from "../workflowFilterList.vue"
import {DataType} from '@/filterConstant'
export default {
  components: {
    WorkflowFilterList
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data(){
      return {
        DataType,
        form: {
            worksheetId: '',
            trigger: '',
            updateFields: []
        },
        worksheetList: [],
        filters: [],
        schemaInputs: [],
        output: [],
      }
  },
  watch: {
    dialog: {
      async handler (val) {
        if(this.dialog){
          let data = await getAllWorksheet(this.appId)
          this.worksheetList = data
          let schemaInputs = this.node?.schema?.inputs || {}
          this.schemaInputs = schemaInputs.order.map(o => {
            for (const key in schemaInputs.properties) {
              if(key === o){
                return {
                  ...schemaInputs.properties[key],
                  id: uuid(),
                  key
                }
              }
            }
          })
          
          let output = await getNodeOutput({
            automationId: this.id,
            nodeId: this.node.nodeId
          })
          this.output = output

          this.form.trigger = this.node?.name
          this.form.worksheetId = this.node?.inputs?.worksheetId
          this.filters = this.node?.inputs?.filters ? this.node?.inputs?.filters.map(c => ({uuid: uuid(), data: c})): []
        }
      },
      deep: true,
    },
  },
  methods: {
    async handleButtonAddFilter(){
      this.save(true)
      let output = await getNodeOutput({
        automationId: this.id,
        nodeId: this.node.nodeId
      })
      this.output = output
      this.handleAddFilter()
    },
    handleAddFilter(){
      let obj = this.getFilterObj()
      this.filters.push({
        uuid: uuid(),
        data: [obj]
      })
    },
    handleAddChildFilter(index){
      let obj = this.getFilterObj()
      let filter = this.filters.find(c => c.uuid === index)
      filter.data.push(obj)
    },
    handleDeleteChildFilter(index, uuid){
      let filter = this.filters.find(c => c.uuid === index)
      filter.data = filter.data.filter(c => c.uuid !== uuid)
      if(filter.data.length === 0){
        this.filters = this.filters.filter(c => c.uuid !== index)
      }
    },
    getFilterObj(){
      let obj = {
        uuid: uuid(),
        field: '',
        filterType: '',
        values: [''],
        dateRange: null,
        dataType: 0,
        value: 0
      }
      return obj
    },
    cancel () {
      this.$emit('update:dialog', false)
    },
    save(close){
      // if (!this.form.trigger || this.form.trigger === '') {
      //   alert('触发方式不能为空')
      //   return
      // }
      if (!this.form.worksheetId || this.form.worksheetId === '') {
        alert('表单不能为空')
        return
      }
      let trigger = null
      for (const key in this.trigger) {
          const element = this.trigger[key];
          if(element.name === this.form.trigger)
          trigger = JSON.parse(JSON.stringify(element))
      }
      trigger.inputs.worksheetId = this.form.worksheetId
      trigger.inputs.filters = this.filters.map(f => f.data)
      this.$emit('update:dialog', close)
      this.$emit('setProperties', trigger)
    }
  },
  computed:{
    trigger () {
      return this.$store.getters?.nodeDefinitions?.trigger || {}
    },
    appId(){
      return this.$route.params.appId
    },
    id(){
      return this.$route.params.id
    },
  }
}
</script>

<style scoped>
</style>